<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件图片上传</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-upload
        class="upload-demo"
        action="http://121.199.29.84:8001/file/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success='getUrl'
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <img :src="'http://121.199.29.84:8888/group1/'+url_" alt="">{{url_}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    fileList:[],
                    url_:''
                }
            },
            methods:{
                handlePreview(){},
                handleRemove(){},
                getUrl(res,file,fileList){
                    this.url_=res.data.id;
                    console.log(res.data.id,file,fileList);
                }
            }
        })
    </script>
</body>
</html>